<template>
    <div class="carrier_product">
        <el-row>
            <el-col :md="10">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="运营商搜索：" class="mt_5">
                        <el-input v-model="formInline.user" placeholder="产品名/运营商套餐ID"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="onSubmit">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button type="primary" @click="getCarrierData">
                        <i class="el-icon-refresh"></i>
                    </el-button>
                </el-form>
            </el-col>
            <el-col :md="10">
                <el-form :inline="true" :model="formOnline" class="demo-form-inline">
                    <el-form-item class="mt_5">
                        <el-radio-group v-model="formOnline.activity">
                            <el-radio label="1">有效</el-radio>
                            <el-radio label="2">失效</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-button type="primary" @click="select">查询</el-button>
                </el-form>
            </el-col>
            <el-col :md="4" class="float-right">
                <router-link :to="'/carrier/' + carrier_product_id + '/carrier_product/new'">
                    <el-button type="primary">新增</el-button>
                </router-link>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="name" label="产品名称" width="200">
            </el-table-column>
            <el-table-column prop="type" label="产品种类" width="100">
            </el-table-column>
            <el-table-column prop="service" label="服务类型" width="100">
            </el-table-column>
            <el-table-column prop="circle" label="服务周期" width="100">
            </el-table-column>
            <el-table-column prop="volume" label="服务容量" width="100">
            </el-table-column>
            <el-table-column prop="productPrice" label="价格" width="100">
            </el-table-column>
            <el-table-column prop="isActivity" label="产品有效性" width="100">
            </el-table-column>
            <el-table-column prop="methods" label="操作">
                <template slot-scope="scope">
                    <router-link size="mini" type="primary" tag="button" :to="'/carrier/' + carrier_product_id + '/carrier_product/edit'" class="el-button el-button--default el-button--mini">
                        编辑
                    </router-link>
                    <router-link size="mini" tag="button" :to="'/carrier/' + carrier_product_id + '/carrier_product/carrier_product_price'" class="el-button el-button--primary el-button--mini">
                        历史价格
                    </router-link>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                formInline: {
                    user: '',
                },
                formOnline: {
                    activity: '1'
                },
                tableData: [],
                tableData1: []
            }
        },
        computed: {
            carrier_product_id() {
                return this.$store.getters.carrier.carrierId
            }
        },
        mounted() {
            this.getCarrierData()
        },
        methods: {
            onSubmit() {
                if (this.formInline.user) {
                    this.tableData = this.tableData1
                    this.newTableData = this.tableData.filter((res) => {
                        return res['name'].includes(this.formInline.user)
                })
                } else {
                    this.newTableData = this.tableData1
                }
                this.tableData = this.newTableData
            },
            select() {
                var flag = ''
                if (this.formOnline.activity) {
                    this.tableData = this.tableData1
                    this.newTableData = this.tableData.filter((res) => {
                        if (this.formOnline.activity == 1) {
                            flag = '有效'
                        } else {
                            flag = '失效'
                        }
                        return res['isActivity'] == flag
                    })
                }
                this.tableData = this.newTableData
            },
            getCarrierData() {
                this.$axios.get('/api/carrier_product').then((res) => {
                if (res.data.errno === 0) {
                    res.data.data.productData.forEach((res) => {
                        res.isActivity = res.isActivity == 1 ? '有效' : '失效'
                    })
                    this.tableData = this.tableData1 = res.data.data.productData
                }
                })
                this.formInline.user = ''
            }
        }
    }
</script>

<style scoped lang="scss">
</style>